import { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import styles from './SelectOrganization.module.css'; // 使用CSS Modules导入样式

const SelectOrganization = () => {
  const [hovered, setHovered] = useState(null); // 保存当前悬停的组织项索引
  const [organizations, setOrganizations] = useState([]); // 保存组织数据
  const navigate = useNavigate(); // 导航函数，用于页面跳转

  // 使用模拟数据代替从后端获取组织数据的逻辑
  useEffect(() => {
    const mockOrganizations = [
      { id: 1, name: '组织A', img1: '/imgA1.png', img2: '/imgA2.png' },
      { id: 2, name: '组织B', img1: '/imgB1.png', img2: '/imgB2.png' },
    ];
    setOrganizations(mockOrganizations);
  }, []);

  // 处理点击进入组织或创建团队的操作
  const handleButtonClick = (action) => {
    if (action === 'create') {
      navigate('/create-team');
    } else if (action === 'personal') {
      navigate('/personal-space');
    }
  };

  return (
    <div className={styles.selectOrgContainer}>
      <div className={styles.selectOrgBox}>
      <div className={styles.loginImage}>
      <div className={styles.logoAndText}>
        <img src="/1.jpg" alt="Logo" className={styles.logoImg} />
        <h1>智链iLink</h1>
      </div>
      <img src="/yhtx_dlzc_1.png" alt="iLink" className={styles.mainImg} />
    </div>
        <div className={styles.verticalLine}></div>
        <div className={styles.selectOrgForm}>
          <h1>选择组织</h1>
          <p>您的账号已经加入以下 <span className={styles.highlight}>{organizations.length}</span> 个组织，点击选择可直接进入</p>
          <div className={styles.orgList}>
            {organizations.map((org, index) => (
              <a
                href={`/organization/${org.id}`}  // 假设组织详情页面使用 ID 进行路由
                className={styles.orgItem}
                key={index}
                onMouseEnter={() => setHovered(index)}
                onMouseLeave={() => setHovered(null)}
              >
                <div
                  className={styles.orgAvatar}
                  style={{
                    backgroundImage: `url(${hovered === index ? org.img1 : org.img2})`
                  }}
                ></div>
                {org.name}
                <span className={styles.arrow}>&#8594;</span>
              </a>
            ))}
          </div>
          <div className={styles.buttonContainer}>
            <button className={styles.btnPrimary} onClick={() => handleButtonClick('personal')}>进入个人空间</button>
            <button className={styles.btnPrimary} onClick={() => handleButtonClick('create')}>创建团队</button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default SelectOrganization;
